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Más elementos 


https: //developer.mozilla.org/es/docs/Learn/HTML/Introduction_to_HTML/Advan: 


Es una forma de estructurar datos en filas y columnas 


Normalmente se utilizan para mostrar información que debe interpretarse 
con los datos de las filas o columnas 


Es un elemento que necesita de múltiples etiquetas para funcionar 


Una tabla puede contener prácticamente cualquier otro elemento, incluso 
otras tablas 


Estudiantes 
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<table> 
<tr> 
<td>fila 1, columna 1</td> 
<td>fila 1, columna 2</td> 
<td>fila 1, columna 3</td> 
</tr> 
SLr> 
<td>fila 2, columna 1</td> 
<td>fila 2, columa 2</td> 
<td>fila 2, columa 3</td> 
</tr> 


</table> 


Cuando NO utilizar tablas 


Las tablas en HTML muchas veces se utilizan para más cosas que sea el 
trabajo con datos, y no están diseñadas para esto 


Uno de los usos más frecuentes es armar la estructura de su página con 
tablas. Como veremos a medida que avance el curso, esto es una mala idea 
ya que implica contenidos muy estructurados, y poco a nada de control 
sobre la semántica del documento en sí 


Si reemplazamos la etiqueta <td> por <th>, declararemos que esa celda es 
una celda de encabezado 


Aunque es independiente de donde realizarlo, se suele utilizar este cambio 
sobre una fila o columna completa 


Inicialmente el único cambio visual que produce es el texto en negrita 


Desbalance de elementos por fila 


Si tenemos más elementos en una fila que en otras, se asume que la tabla 
tiene el ancho total a mayor cantidad de celdas en una fila, y el resto se 
adaptará proporcionalmente dejando un espacio en blanco. 


Aunque esto a veces es un comportamiento deseado, se suele preferir por 
dejar una celda vacia (usualmente con un gmbsp;) o juntar celdas 


Celdas multidimensionales 


Se pueden crear celdas que ocupen más del tamaño de una celda normal, 
tanto en la fila como en la columna 


El atributo colspan en <td> permite determinar la cantidad de columnas 
que ocupa la celda a partir de 1 


El atributo rowspan en <td> permite determinar la cantidad de filas que 
ocupa la celda a partir de 1 


Estructuras dentro de una tabla 


Las tablas pueden tener un encabezado, cuerpo y pie si son declaradas 
explícitamente a través de etiquetas <thead>, <tbody> y <tfoot>. Estas se 
encontrarán como hijo directo de la tabla y contendrán los elementos <tr> 


Si no se declara ninguna estructura, se asumirá que todos los elementos 
internos de la tabla estarán dentro de un <tbody> 


En la mayoría de navegadores, a pesar del orden de declaración, se respeta 
el orden intencionado por las mismas etiquetas 


Trabajo en clase 


Tablas 


Inspeccionando el documento 


Los navegadores disponen de una forma de inspeccionar el documento a 
través de un menú de herramientas para desarrolladores 


En el mismo podemos encontrar todos los elementos del documento como 
fueron interpretados por el navegador en cuestión. El mismo es llamado 
“DOM” (Document Object Model) 


El DOM es la representación de los objetos que existen en el documento 
web en un momento dado. Este documento es interpretado como nodos y 
objetos 


Errores de HTML 


Como vimos en Java o en otros lenguajes, muchos errores son avisados en 
tiempo de compilación (si el lenguaje posee compilación), y otros en tiempo 
de ejecución 


HTML no tiene compilación, y dispone de un código altamente permisivo 
que provoca que no tenga errores de sintaxis por lo tanto el documento 
siempre se mostrará a pesar de que no este correctamente formateado 


Los distintos navegadores tienen reglas diferentes de como recuperarse de 
esos errores, aunque lo mejor es no llegar a ese punto 


Validación de HTML 


Hay un sitio web creado por la misma gente que define las especificaciones 
del lenguaje para comprobar si un documento de HTML esta bien 
formateado 


En caso de que esto no ocurra, listará los errores, advertencias y 
comentarios sobre nuestro código para poder corregirlo 


https://validator.w3.org/ 


Trabajo en clase 


Inspección de elementos y validación de documentos HTML 


Estructura de un documento HTML 


Ademas de utilizar elementos html sueltos sin una estructura clara, 
podemos organizar una página web sencilla a través de elementos html 
especiales. Estos elementos no afectan visualmente al documento sino que 
dan un contexto semántico. 


Por ejemplo tomemos el siguiente código. Al ser todos div no podemos 
determinar que determina cada parte si no hubiese tenido el texto incluido 


<div>Encabezado</div> 
<div>Navegación</div> 
<div>Barra lateral</div> 
<div>Contenido principal</div> 
<div>Pie de página</div> 


Secciones básicas de un documento 


+ Encabezado 

* Elementos de navegación 
« Contenido principal 

* Barra lateral 

« Pie de página 


Secciones de un documento 
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Elementos de estructuras de HTML 


* <main> Contenido principal de la página. Solo uno por documento. 
Recomendado como hijo directo de <body> 

+ <article>: Contiene un bloque de contenido que tiene sentido por si 
mismo y relacionado con otros de su mismo nivel. Por ejemplo una 
publicación en un listado 

* <section>: Similar a <article> pero para bloques más grandes. 
Normalmente tienen como elemento previo algún tipo de encabezado 
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Elementos de estructuras de HTML 


+ <aside>: Contenido que a pesar de no estar relacionado con el principal, 
puede brindar información adicional como glosario o links relacionados 

+ <header>: Representa una introducción al contenido. Si es hijo directo 
de <body>, define el encabezado global del documento 

« <nav>: Principal funcionalidad de navegación en la página. Links 
principales y menús de acceso rápido 

* <footer>: Representa el fin del contenido de un documento 
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Trabajo en clase 


Desarrollo de una estructura de ejemplo 
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¡Muchas Gracias! 


continuará... 


